<template>
	<view class="page_body">
		<!-- 状态栏高度 设置背景色 占位状态栏-->
		<view class="ztl"
			:style="{'height':statusBarHeight}"></view>
		<!-- 导航栏 -->
		<navBar bgColor="#FFF">
			<image :slot="'left'"
				@click="navToBack"
				:src="xcxImgUrl && xcxImgUrl+'fanhui.svg'"
				style="width: 36rpx;height: 36rpx;"></image>
			<text :slot="'content'">物流详情</text>
		</navBar>
		<!-- 占位盒子 -->
		<view class=""
			:style="{'height': hieght}"></view>

		<scroll-view :style="{'height': 'calc(100vh - ' + demoTopHieght +')'}"
			class="main_logistics ">
			<swiper previous-margin='20px'
				next-margin="20px"
				class="swiper"
				circular
				
				>
				<swiper-item v-if="route == 'refund'">
					<view class="swiper-item uni-bg-green">
						<view class="main_logistics_top pd10 mb10">
							<view class="main_logistics_top_t">
								{{name}}
							</view>
							<view class="main_logistics_top_b mt10">
								<view class="main_logistics_top_b_t">
									<text><text class="main_logistics_top_b_t_title">快递单号：</text> {{number}}</text>
								</view>
								<view @click="copyText(number)"
									class="main_logistics_top_b_b">
									复制
								</view>
							</view>
						</view>
						<view class="main_logistics_bom">
							<u-steps current="0"
											dot
											direction="column">
											<u-steps-item  
											v-for="(item,index) in logistcsList"
											:key="index"
											:title="item.acceptStation"
												:desc="item.acceptTime">
											</u-steps-item>
											
										</u-steps>
						</view>
					</view>
					
				</swiper-item>
				<template v-if="route == 'all'">
					<swiper-item
					v-for="(item,index) in logistcsList"
					:key="index"
					>
						<view class="swiper-item uni-bg-green">
							<view class="main_logistics_top pd10 mb10">
								<view class="main_logistics_top_t">
									{{item.name}}
								</view>
								<view class="main_logistics_top_b mt10">
									<view class="main_logistics_top_b_t">
										<text><text class="main_logistics_top_b_t_title">快递单号：</text> {{item.number}}</text>
									</view>
									<view @click="copyText(item.number)"
										class="main_logistics_top_b_b">
										复制
									</view>
								</view>
							</view>
							<view class="main_logistics_bom">
								<u-steps current="0"
												dot
												direction="column">
												<u-steps-item  
												v-for="(it,inx) in item.data"
												:key="inx"
												:title="it.acceptStation"
												:desc="it.acceptTime">
												</u-steps-item>
												
											</u-steps>
							</view>
						</view>
						
					</swiper-item>
				</template >
			</swiper>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		getReturnLogisticsInfo,
		getOrderLogisticsInfo
	} from '@/api/global.js'
	export default {
		computed: {
			...mapGetters(['demoTopHieght']),
		},
		data() {
			return {
				statusBarHeight: '',
				hieght: '',
				logistcsList: [], //物流信息
				name: '', //物流名称
				number: '', //物流编号
				id: '', //单据id
				route: '', //refund 退货物流信息 all 收货物流信息
			};
		},
		onLoad(options) {
			//接收参数
			this.id = options?.id || ''
			this.route = options?.route || ''

			this.getList()
		},
		onShow() {
			this.$nextTick(() => {
				// 获取状态栏的高度
				this.statusBarHeight = this.$store.state.statusBarHeight * 2 + 'rpx'
				// 计算站位的高度
				this.hieght = (this.$store.state.navBarHeight) * 2 + 'rpx'
				//获取高度
				this.Utils.getDemoTopHeight('main_logistics')


			})
		},
		methods: {
			//返回
			navToBack() {
				uni.navigateBack()
			},
			// 点击复制物流单号
			 copyText(num) {
				console.log(num);
				uni.setClipboardData({
					data: num,
					success: () => {
						this.Utils.toast('复制成功')
					}
				})
			},
			//获取物流信息
			async getList() {
				if (this.route == 'refund') { //退货物流信息
					let res = await getReturnLogisticsInfo({
						returnId: this.id
					})
					if (res.code == 2000) {
						this.name = res?.data?.info?.name || ''
						this.number = res?.data?.info?.number || ''
						this.logistcsList = res?.data?.info?.data || []
					} else {
						this.Utils.toast(`${res.msg}`)
					}
				} else { //收货物流信息
					let resA = await getOrderLogisticsInfo({
						orderId: this.id
					})
					if (resA.code == 2000) {
						this.logistcsList = resA?.data?.info || []
					} else {
						this.Utils.toast(`${resA.msg}`)
					}
				}

			}
		},

	}
</script>

<style lang="scss"
	scoped>
	

	.main_logistics {
		width: 100%;
		box-sizing: border-box;
		padding: 20rpx 0;
		.uni-margin-wrap {
			// width: 690rpx;
			width: 100%;
		}

		.swiper {
			height: 100%;
		}

		.swiper-item {
			border-radius: $border_radius_10;
			display: block;
			height: 100%;
			margin: 0 20rpx;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			
			.main_logistics_top {
				width: 100%;
				height: 160rpx;
				box-sizing: border-box;
				border-bottom: 1px solid #f3f3f3;
				.main_logistics_top_t {
					display: flex;
					font-size: 32rpx;
					font-weight: bold;
					color: $text_color_333;
			
				}
			
				.main_logistics_top_b {
					display: flex;
					align-items: center;
					justify-content: space-between;
			
					.main_logistics_top_b_t {
						font-size: $font_size_14;
						color: $text_color_333;
			
						.main_logistics_top_b_t_title {
							color: $text_color_808080;
						}
					}
			
					.main_logistics_top_b_b {
						font-size: $font_size_12;
						color: $text_color_333;
						border: 1px solid #f3f3f3;
						padding: 8rpx 10rpx;
						border-radius: $border_radius_4;
					}
				}
			}
			.main_logistics_bom{
				width: 100%;
				height: calc(1005 - 180rpx);
				overflow-y: scroll;
			}
		}

		.swiper-list {
			margin-top: 40rpx;
			margin-bottom: 0;
		}

		.uni-common-mt {
			margin-top: 60rpx;
			position: relative;
		}

		.info {
			position: absolute;
			right: 20rpx;
		}

		.uni-padding-wrap {
			width: 550rpx;
			padding: 0 100rpx;
		}
	}
</style>